<template>
  <div class="body">
    <div class="fl-row-center body-top">
      <div class="body-top-logo"></div>
      <span>{{ getSubTitle() }}</span>
    </div>
    <div class="body-line"></div>
    <div class="body-content fl-row-center ">
      <div class="fl-row-center body-content-group">
        <span class="mr-24">集团名称</span>
        <el-autocomplete
          v-model="keyword"
          prefix-icon="el-icon-search"
          placeholder="请输入集团名称"
          :fetch-suggestions="getGroupList"
          :trigger-on-focus="false"
          clearable
          autofocus
          @select="handleSelect"
          @clear="handleClear"
        >
          <template slot-scope="{ item }">
            <span v-html="item.name" class="body-search-name"></span>
            <div class="body-search-addr">{{ item.groupId }}</div>
          </template>
        </el-autocomplete>
      </div>

      <div
        class="fl-row-center body-content-account"
        v-if="pageType == 0 || pageType == 2"
      >
        <span class="ml-30 mr-24">账 期</span>
        <el-date-picker
          v-model="dateValue"
          value-format="yyyyMM"
          type="month"
          :clearable="false"
          placeholder="选择月份"
        >
        </el-date-picker>
      </div>

      <el-button
        class="body-sureBtn"
        type="primary"
        size="small"
        round
        @click="sureBtnAction"
        >查询</el-button
      >
    </div>
  </div>
</template>

<script>
import Vue from "vue";

export default {
  name: "ss-search",
  props: {
    titleType: String,
  },
  data() {
    return {
      keyword: "",
      pageNum: "1",
      dateValue: "",
      groupName: "", //集团名称
      pageType: 0, //页面类型
      interfaceType: "group-bill", //接口类型 group-bill:集团账单 group-busi: 业务办理进度查询
    };
  },
  created() {
    // 获取入参方式一:
    const self = this;
    window.addEventListener("message", function(event) {
      const data = event.data;
      if (typeof data === "object") {
        console.log("易查-------获取调用入参:", data);
        if (data.interfaceType) {
          self.interfaceType = data.interfaceType;
          //页面配置
          if (self.interfaceType === "group-busi") {
            //业务办理进度查询页面
            self.pageType = 1;
          } else if (self.interfaceType === "group-owe") {
            //集团欠费查询页面
            self.pageType = 2;
          } else {
            //集团账单页面
            self.pageType = 0;
          }
        }
      }
    });
    if (this.titleType && this.titleType.length > 0) {
      //页面配置
      if (this.titleType === "group-busi") {
        //业务办理进度查询页面
        this.pageType = 1;
      } else if (this.titleType === "group-owe") {
        //集团欠费查询页面
        this.pageType = 2;
      } else {
        //集团账单页面
        this.pageType = 0;
      }
    }
  },
  methods: {
    getSubTitle() {
      if (this.pageType == 1) {
        return "易查 ｜ 集团业务办理进度快速查";
      } else if (this.pageType == 2) {
        return "易查 ｜ 集团欠费快速查";
      }
      return "易查 ｜ 集团账单快速查";
    },
    //点击确定查询
    sureBtnAction() {
      if (this.groupName == "") {
        this.$message({
          message: "请选择要查询的集团",
          type: "warning",
        });
        return;
      }

      if (this.dateValue == "") {
        this.$message({
          message: "请选择要查询的月份",
          type: "warning",
        });
        return null;
      }

      let routerData = this.$router.resolve("account");
      window.open(
        routerData.href +
          "?" +
          "groupName=" +
          this.groupName +
          "&dateValue=" +
          this.dateValue,
        "_blank"
      );
    },
    //获取集团列表信息
    getGroupList(keyword, cb) {
      const mock = require("../../mock/list.json");
      cb(mock.data);
    },
    //选择集团
    handleSelect(item) {
      this.keyword = item.name;
      this.groupName = item.name;
    },
    // 点击清空
    handleClear() {
      this.groupName = "";
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.el-input__inner {
  background-color: rgba(255, 255, 255, 0.3);
  color: white;
  border: 0px;
}
/deep/.el-input__prefix,
.el-input__suffix {
  color: white;
}
/deep/ input::-webkit-input-placeholder {
  color: white;
}
/deep/ input::-moz-input-placeholder {
  color: white;
}
/deep/ input::-ms-input-placeholder {
  color: white;
}
/deep/.el-date-editor input::-webkit-input-placeholder {
  color: white;
}
/deep/.el-date-editor input::-moz-input-placeholder {
  color: white;
}
/deep/.el-date-editor input::-ms-input-placeholder {
  color: white;
}
/deep/.el-date-editor .el-range-input {
  background-color: rgba(255, 255, 255, 0);
  color: white;
}
/deep/ .el-date-editor .el-range__icon {
  color: white;
}
/deep/.el-date-editor .el-range-separator {
  color: white;
}
.el-tag {
  margin-top: 10px;
  margin-right: 10px;
  border-width: 0;
}
.el-button--primary {
  color: #fff;
  background-color: #ffbe4a;
  border-color: #ffbe4a;
  width: 160px;
  height: 30px;
}

.body {
  width: 100%;
  height: 170px;
  background-color: #0095f4;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  &-top {
    margin-left: 14px;
    span {
      font-size: 14px;
      color: white;
      font-weight: 500;
      padding-top: 30px;
    }
    &-logo {
      top: 0;
      background-image: url("../../static/logo.png");
      // background-color: #ffbe4a;
      background-repeat: no-repeat;
      background-size: cover;
      width: 80px;
      height: 80px;
    }
  }
  &-line {
    margin: 0;
    border-bottom: 1px solid white;
    opacity: 0.1;
  }
  &-content {
    padding: 20px 40px 30px;
    font-size: 14px;
    color: white;
    &-account {
      width: 30%;
    }
  }
  &-search-name {
    text-overflow: ellipsis;
    overflow: hidden;
    color: red;
  }
  &-search-addr {
    font-size: 12px;
    color: #b4b4b4;
    margin-top: -12px;
  }
  &-sureBtn {
    margin-left: 40px;
  }
}
.fl-row-center {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.fl-end {
  width: 100%;
  justify-content: space-between;
  margin-top: 5px;
}
.ml-30 {
  margin-left: 30px;
}

.tag-margin {
  margin-top: 10px;
  margin-right: 10px;
}
.mr-24 {
  margin-right: 24px;
  white-space: nowrap;
}

.tag-selected {
  background-color: #ffbe4a;
  color: #0085d0;
  color: white;
}
.tag-deselected {
  background-color: rgba(209, 232, 252, 0);
  color: white;
}
</style>
